<template>
  <div id="myChartOne" :style="{ width: '100%', height: '250px' }"></div>
</template>

<script>
  import { setTimeout } from "timers";
  export default {
    props: ["obj"],
    data() {
      return {
        objxsh: {},
        option: {
          grid: {
            containLabel: false
          },
          xAxis: [
            {
              // type: "category",
              data: ['集团','我的'],
              scale: true,
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff', // 颜色
                  width: 1 // 粗细
                }
              },
              axisLabel: {
                show: true,//这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                  fontSize: 8,
                  color: "#000",  //这里用参数代替了
                },
               
              }
            },
            {
              // type: "category",
              data: ['集团','我的'],
              scale: true,
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff', // 颜色
                  width: 1 // 粗细
                }
              },
              axisLabel: {
                show: true,//这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                  fontSize: 8,
                  color: "#000",  //这里用参数代替了
                },
               
              }
            },
            {
              // type: "category",
              data: ['集团','我的'],
              scale: true,
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff', // 颜色
                  width: 1 // 粗细
                }
              },
              axisLabel: {
                show: true,//这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                  fontSize: 8,
                  color: "#000",  //这里用参数代替了
                },
               
              }
            }
          ],
          yAxis: {
            show: false
          },
          series: [
            {
              name: "测试title",
              type: "bar",
              stack: "广告",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              //  markPoint: {
              //   symbolSiz: 1,
              //   label: {
              //     normal: {
              //       formatter: "h测试1",
              //       borderWidth: 1,
              //       position: "right"
              //     }
              //   },
              //   data: [
              //     { type: "max", name: "max days: " },
              //     { type: "min", name: "min days: " }
              //   ]
              // },
              itemStyle: {
                normal: {
                  color: "rgba(87,202,251)"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 10,
                  top: 10
                }
              },
              data: [' ',1]
            },
            {
              name: "邮件营销",
              type: "bar",
              stack: "广告",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: "rgba(85,139,251)"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 8
                }
              },
              data: [' ',6]
            },
            {
              name: "联盟广告",
              type: "bar",
              stack: "广告",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: "#eb437b"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 8
                }
              },
              data: ['',3]
            },
            {
              name: "邮件广告",
              type: "bar",
              stack: "sgg",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: "rgba(87,202,251)"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 8
                }
              },
              data: ['',5]
            },
            {
              name: "广告广告",
              type: "bar",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: "rgba(85,139,251)"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 8
                }
              },
              stack: "sgg",
              data: ['',7]
            },
            {
              name: "视频广告",
              type: "bar",
              stack: "sgg",
              barGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
              barCategoryGap: "50%",
              barWidth: 25,
              barMinHeight: this.globalVariable.barMinHeight,
              itemStyle: {
                normal: {
                  color: "#eb437b"
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 8
                }
              },
              data: [89,'']
            }
          ]
        }
      };
    },
    created() {
      setTimeout(() => {
        // this.obj && this.obj.individuadata && this.obj.individuadata.XSH_AMOUNT != 0 ? this.option.xAxis[0].data.push(
        //   "先审核后付款" + "\n" + this.obj.individuadata.XSH_AMOUNT * 1 + "单"
        // ) : this.option.xAxis[0].data.push(
        //   "先审核后付款" + "\n" + 0 + "单"
        // );
        this.obj && this.obj.avgtimedata && this.obj.avgtimedata.XSH_DBYD != 0 ? this.option.series[1].data.push(this.obj.avgtimedata.XSH_DBYD * 1) : '';
        this.obj && this.obj.avgtimedata && this.obj.avgtimedata.XSH_GXCL != 0 ? this.option.series[2].data.push(this.obj.avgtimedata.XSH_GXCL * 1) : '';
        this.obj && this.obj.individuadata && this.obj.individuadata.XSH_YWSH != 0 ? this.option.series[3].data.push(this.obj.individuadata.XSH_YWSH * 1) : '';
        this.obj && this.obj.individuadata && this.obj.individuadata.XSH_DBYD != 0 ? this.option.series[4].data.push(this.obj.individuadata.XSH_DBYD * 1) : '';
        this.obj && this.obj.individuadata && this.obj.individuadata.XSH_GXCL != 0 ? this.option.series[5].data.push(this.obj.individuadata.XSH_GXCL * 1) : '';
      }, 1000);
    },
    mounted() {
      this.drawLine();
    },
    watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.drawLine();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("myChartOne"));
        // myChart.style.width = window.innerWidth+'px';
        // myChart.style.height = window.innerHeight+'px';
        myChart.setOption(this.option, true);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize(); // 图表根据窗口大小进行自适应
          };
        }, 200);
      }
    }
  };
</script>

<style scoped>
  #myChartOne {
    min-height: 4rem
  }
</style>